webrtc视频播放器（srs.sdk.js）

2024-01-06 11:42| 来源: 网络整理| 查看: 265

1.将srs.sdk.js放到文件中

在vue中使用，需要将js方法中的函数通过 export default{}的方式暴露出来。

2.srs拉流（播放器）

下面是通过srs.sdk.js文件中的SrsRtcPlayerAsync方法进行拉流；

还有一种方法，可以在index.html中通过script引入jswebrtc.min.js文件，调用方法直接使用

(1)封装组件 import Srs from '@/assets/js/srs.sdk' export default { name: 'webrtcPlayer2', props: { videoId: { type: String, default: 'player' }, url: { type: String, default: '' }, }, data () { return { } }, created () { }, mounted () { this.play() }, methods: { play () { var player = document.getElementById(this.videoId); //方法一：使用srs.sdk.js const rtcPlayer = new Srs.SrsRtcPlayerAsync() rtcPlayer.play(this.url) // video标签 player.srcObject = rtcPlayer.stream //方法二：使用jswebrtc.min.js // new JSWebrtc.Player(this.url, { video: player, autoplay: true, }); } } } （2）使用 3.srs推流（视频、广播）（1）封装 import Srs from '@/assets/js/srs.sdk' export default { name: 'webrtcPusher', props: { videoId: { type: String, default: 'pusher' }, url: { type: String, default: '' }, isVideo: { type: Boolean, default: false } }, data () { return { sdk: null, } }, created () { // this.url = 'webrtc://41.128.16.190:1990/live/livestream' }, mounted () { this.$watch('url', () => { console.log('url', this.url) if (this.url) { this.start() } else { // this.stop() } }, { immediate: true, deep: true }) }, methods: { start () { //1.定义播放器 var play = document.getElementById(this.videoId); // 2. 调用srs.sdk.js的SrsRtcPublisherAsync方法，new一个对象（记得将方法暴漏出来） this.sdk = new Srs.SrsRtcPublisherAsync() // 3. 执行SrsRtcPublisherAsync中的publish方法进行推流（jq调用ajax改为原生ajax） this.sdk.publish(this.url).then(session => { // 推流成功 console.log('session', session) }).catch(reason => { // 推流失败 // 3.1 执行close方法，关闭推流 this.sdk.close(); console.log('reason', reason) // 3.2错误判断 if (reason.name === 'HttpsRequiredError') { alert(`WebRTC推流必须是HTTPS或者localhost：` + reason.name + reason.message); } else if (reason.name === 'NotFoundError') { alert(`找不到麦克风和摄像头设备：getUserMedia` + reason.name + reason.message); } else if (reason.name === 'NotAllowedError') { alert(`你禁止了网页访问摄像头和麦克风：getUserMedia` + reason.name + reason.message); } else if (reason.name === 'NotAllowedError') { alert(`你禁止了网页访问摄像头和麦克风：getUserMedia` + reason.name + reason.message); } else if (['AbortError', 'NotAllowedError', 'NotFoundError', 'NotReadableError', 'OverconstrainedError', 'SecurityError', 'TypeError'].includes(reason.name)) { alert(`getUserMedia` + reason.name + reason.message); } else { alert(reason.name + reason.message); } }) // 4.打开播放器 // new JSWebrtc.Player(this.url, { video: play, autoplay: true, }); const rtcPlayer = new Srs.SrsRtcPlayerAsync() rtcPlayer.play(this.url) play.srcObject = rtcPlayer.stream if (this.isVideo) { play.style.display = 'block' } else { play.style.display = 'none' } }, play () { } } }

（2）使用

【本文地址】

公司简介

联系我们